iT邦幫忙

2024 iThome 鐵人賽

DAY 22
0

這篇文章要介紹如何利用 CSS 創建一個基本的滑動幻燈片(Slider),實現平滑的圖片過渡效果

HTML

創建一個名為 slider-wrapper 的容器,其中包含三張圖片,這樣每張圖片都能在同一個容器中顯示,並實現滑動效果

<div class="slider-wrapper">
    <img class="slider-item" src="picture1.jpeg" alt="Slide1">
    <img class="slider-item" src="picture2.png" alt="Slide 2">
    <img class="slider-item" src="picture3.jpg" alt="Slide 3">
</div>
  • slider-wrapper: 是整個幻燈片的外部容器,負責控制所有內部圖片的顯示和排版
  • slider-item : 每張圖片使用 slider-item 類別來進行統一樣式控制

CSS

1. 設定整個頁面的樣式

使用 Flexboxbody 的內容在水平方向和垂直方向上都居中顯示,讓幻燈片位於畫面正中間,並利用 height設置高度,佔滿整個視窗

body {
    margin: 0;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #f5f5f5;
}

2. 容器樣式

設定 slider-wrapper 的大小,確保容器的大小固定能夠正常顯示圖片,及隱藏超出範圍的內容

.slider-wrapper {
    width: 400px; 
    height: 300px;
    overflow: hidden; 
    position: relative;
}
  • overflow : 隱藏超出容器範圍的圖片部分

3. 圖片樣式

設定每張圖片的樣式,確保它們能夠重疊顯示,並添加動畫效果

.slider-item {
    width: 100%; 
    height: 100%;
    position: absolute; 
    transform: translateX(100%); 
    opacity: 0;
    animation: slide 12s infinite; 
}
  • position : absolute : 讓每張圖片都能重疊在一起。
  • transform : translateX(100%) : 將每張圖片初始位置設定在容器的右側外部,這樣在開始動畫時才可以從右側進入
  • animation : 定義一個名為 slide 的動畫,每 12 秒會重複一次

4. 每張圖片的動畫延遲

為了實現圖片的逐個顯示,每張圖片設置不同的動畫延遲時間

.slider-item:nth-child(1) {
    animation-delay: 0s;
}

.slider-item:nth-child(2) {
    animation-delay: 4s; 
}

.slider-item:nth-child(3) {
    animation-delay: 8s; 
}
  • nth-child(n) : 針對每一張圖片設置不同的動畫延遲,讓它們依次出現
  • animation-delay : 確保每張圖片在其相應的時間點開始動畫,形成連續的滑動效果

5. 定義滑動動畫

定義每張圖片在時間進程中的變化,透過 transformopacity 實現圖片的顯示、隱藏和滑動效果

@keyframes slide {
    0%, 20% {
        transform: translateX(0); 
        opacity: 1; 
    }
    25%, 45% {
        transform: translateX(-100%); 
        opacity: 1; 
    }
    50% {
        transform: translateX(-100%); 
        opacity: 0; 
    }
    55%, 100% {
        transform: translateX(100%); 
        opacity: 0; 
    }
}
  • 0%,20% : 在動畫的開始和前 20% 時,圖片保持在初始位置,並完全可見
  • 25%,45% : 圖片會往左滑動至畫面外translateX(-100%),此時仍然可見opacity: 1
  • 50% : 圖片會保持在左側的位置,但變得不可見opacity: 0,表示當前圖片已經完全滑出畫面,準備進入下一張圖片
  • 55%,100% : 圖片將會滑動到右側外部 translateX(100%),並保持不可見,確保當前圖片完全滑出後,能夠為下一張圖片的進入留出空間

結果呈現

動畫


上一篇
Day21 - 透明立方體
下一篇
Day23 - 漫畫圖片濾鏡效果
系列文
探索HTML 與 CSS 的動態魔法30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言